<template>
  <!-- 左竖结构--雨水 -->
  <div class="BigData_left">
    <div
      id="div_dsj_left_1"
      style="
        margin-top: 50px;
        width: 100%;
        height: 10%;
        float: left;
        margin-left: 10px;
      "
    >
      <div
        style="
          width: 100%;
          height: 35px;
          color: #fff;
          font-size: 18px;
          line-height: 35px;
          position: relative;
          text-shadow: 0 0 25px #00d8ff;
          letter-spacing: 3px;
        "
      >
        <span class="is_nw_title1">雨水管网</span>
        <img
          src="@/assets/images/fgx.png"
          style="position: absolute; left: 0; bottom: 0; width: 100%"
        />
        <p
          id="gwzc_p"
          style="
            width: 40%;
            left: 0;
            top: 60px;
            color: #20dbfd;
            text-shadow: 0 0 25px #00d8ff;
            font-size: 46px;
            font-family: yjsz;
            text-align: right;
            position: absolute;
          "
        >
          7969.98
        </p>
        <p style="position: absolute; margin-left: 55%; margin-top: 32px">
          千米(最新数据)
        </p>
      </div>
    </div>
    <!-- 左侧管网口径 -->
    <div
      id="div_dsj_left_2"
      style="
        margin-top: 20px;
        width: 100%;
        height: 50%;
        float: left;
        margin-left: 10px;
      "
    >
      <div
        style="
          width: 100%;
          height: 35px;
          color: #fff;
          font-size: 18px;
          line-height: 35px;
          position: relative;
          text-shadow: 0 0 25px #00d8ff;
          letter-spacing: 3px;
        "
      >
        <span class="is_nw_title2">管网口径</span>
        <img
          src="@/assets/images/fgx.png"
          style="position: absolute; left: 0; bottom: 0; width: 100%"
        />
      </div>
      <div
        id="div_dsj_gczj_chart"
        style="
          width: 100%;
          height: 50%;
          float: left;
          position: absolute;
          user-select: none;
          background: transparent;
        "
        _echarts_instance_="ec_1678933446227"
      ></div>
    </div>
  </div>
  <!-- 下侧结构 -->
  <div
    id="div_dsj_bottom"
    style="
      width: 100%;
      height: 30%;
      float: right;
      position: absolute;
      z-index: 999;
      bottom: 0px;
      background-image: linear-gradient(
        -180deg,
        rgba(255, 255, 255, 0) 0%,
        #0b173f 80%
      );
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    "
  >
    <!-- 雨水管网材质标题 -->
    <div
      style="
        width: 100%;
        height: 35px;
        color: #fff;
        font-size: 18px;
        line-height: 35px;
        position: relative;
        text-shadow: 0 0 25px #00d8ff;
        letter-spacing: 3px;
      "
    >
      <span class="is_nw_title3">管网材质</span>
      <img
        src="@/assets/images/fgx.png"
        style="position: absolute; left: 0; bottom: 0; width: 370px"
      />
    </div>
    <!-- 左下管网材质 -->
    <div
      id="div_dsj_bottom_31"
      style="
        margin-top: 10px;
        width: 30%;
        height: 100%;
        float: left;
        padding-right: 10px;
      "
    >
      <div
        id="div_dsj_bottom_3"
        style="
          width: 30%;
          height: 90%;
          float: left;
          position: absolute;
          user-select: none;
          background: transparent;
        "
        _echarts_instance_="ec_1678932768548"
      ></div>
    </div>
    <!-- 中下三种井消防栓 -->
    <div
      id="div_dsj_bottom_21"
      style="
        margin-top: 10px;
        width: 40%;
        height: 100%;
        float: left;
        padding-left: 10px;
      "
    >
      <div
        id="div_dsj_bottom_2"
        style="
          width: 40%;
          height: 100%;
          float: left;
          position: absolute;
          user-select: none;
          background: transparent;
        "
        _echarts_instance_="ec_1678932768549"
      ></div>
    </div>
    <!-- 右下管网材质--计量点 -->

    <div
      id="div_dsj_bottom_31"
      style="
        margin-top: 10px;
        width: 30%;
        height: 100%;
        float: right;
        padding-right: 10px;
      "
    >
      <div
        id="div_dsj_bottom_1"
        style="
          width: 30%;
          height: 90%;
          float: right;
          position: absolute;
          user-select: none;
          background: transparent;
        "
        _echarts_instance_="ec_1678932768547"
      ></div>
    </div>
  </div>
  <!-- 右竖结构--污水 -->
  <div
    id="div_dsj_right"
    style="
      width: 370px;
      height: 100%;
      position: absolute;
      top: 0px;
      right: 0px;
      background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #0b173f 80%
      );
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    "
  >
    <div
      id="div_dsj_right_1"
      style="
        margin-top: 50px;
        width: 100%;
        height: 10%;
        float: left;
        padding-right: 10px;
      "
    >
      <div
        style="
          width: 100%;
          height: 35px;
          color: #fff;
          font-size: 18px;
          line-height: 35px;
          position: relative;
          text-shadow: 0 0 25px #00d8ff;
          letter-spacing: 3px;
          text-align: right;
        "
      >
        <span>污水管网</span>
        <img
          src="@/assets/images/fgx_.png"
          style="position: absolute; left: 0; bottom: 0; width: 100%"
        />
        <p
          id="fmzs_p"
          style="
            width: 50%;
            color: #e6f706;
            text-shadow: 0 0 25px #00d8ff;
            font-size: 46px;
            font-family: yjsz;
            text-align: right;
            position: absolute;
            top: 60px;
            right: 180px;
          "
        >
          5166.59
        </p>
        <p
          style="
            position: absolute;
            margin-left: 55%;
            margin-top: 32px;
            color: #fff;
          "
        >
          千米(最新数据)
        </p>
      </div>
    </div>
    <div
      id="div_dsj_right_2"
      style="
        margin-top: 20px;
        width: 100%;
        height: 50%;
        float: left;
        padding-right: 10px;
      "
    >
      <div
        style="
          width: 100%;
          height: 35px;
          color: #fff;
          font-size: 18px;
          line-height: 35px;
          position: relative;
          text-shadow: 0 0 25px #00d8ff;
          letter-spacing: 3px;
          text-align: right;
        "
      >
        <span>管网口径</span>
        <img
          src="@/assets/images/fgx_.png"
          style="position: absolute; left: 0; bottom: 0; width: 100%"
        />
      </div>
      <div
        id="div_dsj_fmkj_chart"
        style="
          width: 100%;
          height: 95%;

          user-select: none;
          background: transparent;
        "
        _echarts_instance_="ec_1678936146351"
      ></div>
      <div
        style="
          width: 100%;
          height: 35px;
          color: rgb(255, 255, 255);
          font-size: 18px;
          line-height: 35px;
          position: relative;
          text-shadow: rgb(0, 216, 255) 0px 0px 25px;
          letter-spacing: 3px;
          text-align: right;
          transform: translateY(-17px);
        "
      >
        <span>管网材质</span>
        <img
          src="@/assets/images/fgx_.png"
          style="position: absolute; right: 0; bottom: 0; width: 370px"
        />
      </div>
    </div>
  </div>
</template>

<script type="module">
const BigDataArr = await getBigData().then((res) => res.data)
</script>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { getBigData } from '@/api/index'
onMounted(() => {
  // console.log('大数据接参', BigDataArr)
  load_charts()
})
const load_charts = () => {
  // 三个消防栓
  var sz_xfs = 0
  var xq_xfs = 0
  var qt_xfs = 0
  var zs_xfs = sz_xfs + xq_xfs + qt_xfs
  // 左侧雨水口径
  var gczj_y_data = []
  var gczj_x_data = []
  // 右侧雨水口径
  var fmkj_y_data = []
  var fmkj_x_data = []
  var jld_y_data = []
  var jld_x_data = []
  var gwcz_y_data = []
  var gwcz_x_data = []

  var myJSONobj = []
  if (BigDataArr != null) {
    myJSONobj = BigDataArr
  } else {
    console.log('错误')
  }

  for (var i = 0; i < myJSONobj.length; i++) {
    if (
      myJSONobj[i].layerName == '雨水管' &&
      myJSONobj[i].fieldName == 'DMCC'
    ) {
      var value = parseFloat(myJSONobj[i].value)
      // 雨水口径
      // 控制只渲染最多十四条到页面上
      if (gczj_y_data.length > 14) continue
      gczj_y_data.push(myJSONobj[i].fieldValue)
      gczj_x_data.push((value / 1000).toFixed(2))
    }
    if (
      myJSONobj[i].layerName == '污水管' &&
      myJSONobj[i].fieldName == 'DMCC'
    ) {
      var value = parseFloat(myJSONobj[i].value)
      // 污水口径
      if (fmkj_y_data.length > 14) continue
      fmkj_y_data.push(myJSONobj[i].fieldValue)
      fmkj_x_data.push((value / 1000).toFixed(2))
    }
    // 污水管网材质
    if (
      myJSONobj[i].layerName == '污水管' &&
      myJSONobj[i].fieldName == 'Material'
    ) {
      var value = parseFloat(myJSONobj[i].value)
      // FMGS = FMGS + value
      if (jld_y_data.length > 7) continue
      jld_y_data.push(myJSONobj[i].fieldValue)
      jld_x_data.push((value / 1000).toFixed(2))
    }
    // 雨水管网材质
    if (
      myJSONobj[i].layerName == '雨水管' &&
      myJSONobj[i].fieldName == 'Material'
    ) {
      var value = parseFloat(myJSONobj[i].value)
      // GWCD = GWCD + value
      if (gwcz_y_data.length > 7) continue
      gwcz_y_data.push(myJSONobj[i].fieldValue)
      gwcz_x_data.push((value / 1000).toFixed(2))
    }
    if (
      myJSONobj[i].layerName == '检查井' ||
      myJSONobj[i].layerName == '排放口' ||
      myJSONobj[i].layerName == '进水口'
    ) {
      var value = parseFloat(myJSONobj[i].value)
      if (myJSONobj[i].layerName == '检查井') {
        sz_xfs = parseFloat(value) + sz_xfs
        // console.log(sz_xfs)
      }
      if (myJSONobj[i].layerName == '进水口') {
        xq_xfs = parseFloat(value) + xq_xfs
      }
      if (myJSONobj[i].layerName == '排放口') {
        qt_xfs = parseFloat(value) + qt_xfs
      }
    }
  }
  zs_xfs = sz_xfs + xq_xfs + qt_xfs
  // 雨水与污水口径顺序调换重排
  var gczj_y_data_ = []
  var gczj_x_data_ = []
  for (var i = gczj_y_data.length - 1; i >= 0; i--) {
    gczj_y_data_.push(gczj_y_data[i])
    gczj_x_data_.push(gczj_x_data[i])
  }
  gczj_y_data = gczj_y_data_
  gczj_x_data = gczj_x_data_

  var fmkj_y_data_ = []
  var fmkj_x_data_ = []
  for (var i = fmkj_y_data.length - 1; i >= 0; i--) {
    fmkj_y_data_.push(fmkj_y_data[i])
    fmkj_x_data_.push(fmkj_x_data[i])
  }
  fmkj_y_data = fmkj_y_data_
  fmkj_x_data = fmkj_x_data_

  var jld_y_data_ = []
  var jld_x_data_ = []
  for (var i = jld_y_data.length - 1; i >= 0; i--) {
    jld_y_data_.push(jld_y_data[i])
    jld_x_data_.push(jld_x_data[i])
  }
  jld_y_data = jld_y_data_
  jld_x_data = jld_x_data_
  // 雨水口径左
  // var gczj_y_data = [
  //   'DN75',
  //   'DN32',
  //   'DN300',
  //   'DN250',
  //   'DN70',
  //   'DN20',
  //   'DN600',
  //   'DN500',
  //   'DN1800',
  //   'DN1400',
  //   'DN1200',
  //   'DN25',
  // ]
  // 雨水口径右
  // var gczj_x_data = [
  //   64162, 88871, 101454, 164377, 198705, 221259, 276068, 297882, 518360,
  //   529164, 755710, 803960,
  // ]
  // 污水口径右
  // var fmkj_y_data = [
  //   'DN150',
  //   'DN110',
  //   'DN100',
  //   'DN90',
  //   'DN80',
  //   'DN63',
  //   'DN60',
  //   'DN50',
  //   'DN40',
  //   'DN32',
  //   'DN25',
  //   'DN20',
  // ]
  // 污水口径左
  // var fmkj_x_data = [
  //   198, 422, 710, 836, 1210, 1337, 2532, 2989, 3910, 6259, 8128, 10279,
  // ]
  // 雨水管网材质
  // var gwcz_y_data = ['有缝钢塑', '镀锌', 'PE', '未知', '铸铁']
  // var gwcz_x_data = [55994, 157388, 194991, 220262, 579621]
  // 污水管网材质
  // var jld_y_data = ['用户水表', '接水点', '流量计', '大用户', '消防表']
  // var jld_x_data = [127977, 27801, 185, 107, 1]

  //管网统计
  /* 左侧管网口径结构--雨水 */
  var gczj_chart = echarts.init(document.getElementById('div_dsj_gczj_chart'))
  var gczj_chart_option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0,
        },
      },
      formatter: function (prams) {
        return (
          '规格：' +
          prams[0].data +
          '千米(' +
          // ((parseFloat(prams[0].data) / (GWCD / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    grid: {
      top: '2%',
      bottom: '10%',
      right: '14%',
      left: '2%',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        gridIndex: 0,

        data: gczj_y_data,
        axisLabel: {
          show: true,
          color: '#fff',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
      },
    ],
    xAxis: [
      {
        type: 'value',
        gridIndex: 0,

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisLabel: {
          show: false,
          color: 'rgb(170,170,170)',
          fontSize: 16,
        },
      },
    ],
    series: [
      {
        name: '规格',
        type: 'bar',
        barWidth: '15',
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          // normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#97deff' },
            { offset: 1, color: '#0240ff' },
          ]),
          // },
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            color: '#fff',
            //font-family: "NumFont";
          },
        },
        data: gczj_x_data,
        zlevel: 11,
      },
    ],
  }
  gczj_chart.setOption(gczj_chart_option)
  /* 左下管网材质结构 */
  //管网材质
  var myChart_GWCZ = echarts.init(document.getElementById('div_dsj_bottom_3'))
  var option3_2 = {
    //color: ['#e54035', '#0aacff', '#0ab120', '#e50ee6', '#e6cf1e'],
    title: {
      show: false,
      top: '5%',
      left: 'center',
      text: '计量点类型',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 24,
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '20%',
      top: '60px',
      padding: '0 0 10 0',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return (
          params[0].name +
          ': ' +
          params[0].value +
          '千米(' +
          // ((parseFloat(params[0].value) / (FMGS / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    xAxis: [
      {
        type: 'category',
        data: gwcz_y_data,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)',
          },
        },
        axisLabel: {
          margin: 10,
          color: '#e2e9ff',
          // textStyle: {
          fontSize: 14,
          // },
        },
      },
    ],
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        data: gwcz_x_data,
        barWidth: '20px',
        itemStyle: {
          // normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(0,244,255,1)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0,77,167,1)', // 100% 处的颜色
              },
            ],
            false
          ),
          borderRadius: [30, 30, 30, 30],
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
          // },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            width: 80,
            height: 30,
            backgroundColor: 'rgba(0,160,221,0.1)',
            borderRadius: 200,
            position: ['-8', '-60'],
            distance: 1,
            formatter: ['    {d|●}', ' {a|{c}}     \n', '    {b|}'].join(','),
            rich: {
              d: {
                color: '#3CDDCF',
              },
              a: {
                color: '#fff',
                align: 'center',
              },
              b: {
                width: 1,
                height: 30,
                borderWidth: 1,
                borderColor: '#234e6c',
                align: 'left',
              },
            },
          },
        },
      },
    ],
  }
  myChart_GWCZ.setOption(option3_2)
  /* 正中三种消防栓 */
  //消防栓
  var myChart_XFS = echarts.init(document.getElementById('div_dsj_bottom_2'))
  var dataStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 0,
      shadowColor: '#203665',
    },
  }
  var option_xsh = {
    //backgroundColor: "#20263f",

    title: {
      show: false,
      top: '0%',
      left: 'center',
      text: '消防栓类型',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 24,
      },
    },
    series: [
      {
        name: '排放口',
        type: 'pie',
        clockwise: false,
        radius: [55, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['85%', '45%'],
        data: [
          {
            value: qt_xfs,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#F3CCFF',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16,
                  },
                },
                formatter: function (params) {
                  return '{a|' + params.value + '}\n\n' + '{b|排放口}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              // normal: {
              color: '#F3CCFF',
              shadowColor: '#F3CCFF',
              shadowBlur: 0,
              // },
            },
          },
          {
            value: zs_xfs - qt_xfs,
            name: 'invisible',
            itemStyle: {
              // normal: {
              color: '#0D3166',
              // },
              emphasis: {
                color: '#0D3166',
              },
            },
          },
        ],
      },
      {
        name: '检查井',
        type: 'pie',
        clockwise: false,
        radius: [55, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['50%', '45%'],
        data: [
          {
            value: sz_xfs,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#FFFF70',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16,
                  },
                },
                formatter: function (params) {
                  return '{a|' + params.value + '}\n\n' + '{b|检查井}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              // normal: {
              color: '#FFFF70',
              shadowColor: '#7FFCCE',
              shadowBlur: 0,
              // },
            },
          },
          {
            value: zs_xfs - sz_xfs,
            name: 'invisible',
            itemStyle: {
              // normal: {
              color: '#0D3166',
              // },
              emphasis: {
                color: '#0D3166',
              },
            },
          },
        ],
      },
      {
        name: '进水口',
        type: 'pie',
        clockwise: false,
        radius: [55, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['15%', '45%'],
        data: [
          {
            value: xq_xfs + 20000,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#7FFCCE',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16,
                  },
                },
                formatter: function (params) {
                  return '{a|' + (params.value - 20000) + '}\n\n' + '{b|进水口}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              // normal: {
              color: '#7FFCCE',
              shadowColor: '#7FFCCE',
              shadowBlur: 0,
              // },
            },
          },
          {
            value: zs_xfs - sz_xfs,
            name: 'invisible',
            itemStyle: {
              // normal: {
              color: '#0D3166',
              // },
              emphasis: {
                color: '#0D3166',
              },
            },
          },
        ],
      },
    ],
  }
  myChart_XFS.setOption(option_xsh)
  /* 右下管网材质--计量点 */
  //计量点
  var myChart_JLD = echarts.init(document.getElementById('div_dsj_bottom_1'))
  var option_JLD = {
    //color: ['#e54035', '#0aacff', '#0ab120', '#e50ee6', '#e6cf1e'],
    title: {
      show: false,
      top: '5%',
      left: 'center',
      text: '计量点类型',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 24,
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '20%',
      top: '60px',
      padding: '0 0 10 0',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return (
          params[0].name +
          ': ' +
          params[0].value +
          '千米(' +
          // ((parseFloat(params[0].value) / (GWCD / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    xAxis: [
      {
        type: 'category',
        data: jld_y_data,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)',
          },
        },
        axisLabel: {
          margin: 10,
          color: '#e2e9ff',
          // textStyle: {
          fontSize: 14,
          // },
        },
      },
    ],
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        data: jld_x_data,
        barWidth: '20px',
        itemStyle: {
          // normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(0,244,255,1)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0,77,167,1)', // 100% 处的颜色
              },
            ],
            false
          ),
          borderRadius: [30, 30, 30, 30],
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
          // },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            width: 80,
            height: 30,
            backgroundColor: 'rgba(0,160,221,0.1)',
            borderRadius: 200,
            position: ['-8', '-60'],
            distance: 1,
            formatter: ['    {d|●}', ' {a|{c}}     \n', '    {b|}'].join(','),
            rich: {
              d: {
                color: '#3CDDCF',
              },
              a: {
                color: '#fff',
                align: 'center',
              },
              b: {
                width: 1,
                height: 30,
                borderWidth: 1,
                borderColor: '#234e6c',
                align: 'left',
              },
            },
          },
        },
      },
    ],
  }
  myChart_JLD.setOption(option_JLD)
  /* 右侧管网口径结构--污水 */
  var fmkj_chart = echarts.init(document.getElementById('div_dsj_fmkj_chart'))
  var fmkj_chart_option = {
    title: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      textStyle: {
        color: '#f0c429',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0,
        },
      },
      formatter: function (prams) {
        return (
          '规格：' +
          prams[0].data +
          '千米(' +
          // ((parseFloat(prams[0].data) / (FMGS / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    grid: {
      top: '2%',
      bottom: '10%',
      left: '14%',
      right: '2%',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        gridIndex: 0,

        data: fmkj_y_data,
        color: 'rgba(255,255,255,1)',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,

          color: '#fff',
        },
      },
      {
        type: 'category',
        gridIndex: 0,

        data: fmkj_y_data,
        color: 'rgba(255,255,255,1)',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,

          color: '#fff',
        },
      },
    ],
    xAxis: [
      {
        inverse: true,
        type: 'value',
        gridIndex: 0,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisLabel: {
          show: false,
          color: 'rgb(170,170,170)',

          fontSize: 16,
        },
      },
    ],
    series: [
      {
        name: '规格',
        type: 'bar',
        barWidth: '15',
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          // normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#ff6e02' },
            { offset: 1, color: '#ffffcd' },
          ]),
          // },
        },
        label: {
          normal: {
            show: true,
            position: 'left',
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
        },
        data: fmkj_x_data,
        zlevel: 11,
      },
    ],
  }

  fmkj_chart.setOption(fmkj_chart_option)
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'yjsz';
  src: url('../../assets/yjsz.TTF') format('truetype');
}
.BigData_left {
  width: 370px;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-image: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 0) 0%,
    #0b173f 80%
  );
  user-select: none;
}
</style>
